<template>
	<view>
		<view class="sub_page">
			<view class="sub_header">
				<view class="sub_address">珠江西路105号 高德置地夏广场</view>
				<view class="sub_user"><text class="name">黄小姐</text> 13437559050</view>
			</view>
			<ShopOrder></ShopOrder>
			<view class="sub_remark">
				<view class="remark">
					<view class="re_text">备注</view>
					<input class="re_info" placeholder-style="color: #DBDBDB" v-model="text" placeholder="口味、包装、配送等说明"
						type="text">
				</view>
				<view class="payment">
					<view class="pay_text">支付方式</view>
					<view class="pay_mode">
						<image></image>
						微信支付
					</view>
				</view>
			</view>
		</view>
		<view class="sub_footer">
			<view class="pay_label">
				<view class="label">应付：</view>
				<view class="pay_total_price">￥138.80</view>
			</view>
			<view class="pay_btn">去支付</view>
		</view>
	</view>
</template>

<script>
import ShopOrder from "../../components/shopOrder/index.vue"
export default {
	components: {
		ShopOrder,
	},
	data() {
		return {
			text: ''
		};
	}
}
</script>

<style lang="scss" scoped>
.sub_page {
	min-height: 100vh;
	padding: 20rpx;
	background-color: #eeeeee;

	.sub_header {
		background-color: #fff;
		padding: 40rpx 30rpx;
		border-radius: 24rpx;

		.sub_address {
			margin-bottom: 20rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #222222;
		}

		.sub_user {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;

			.name {
				margin-right: 30rpx;
			}
		}
	}

	.sub_remark {
		background-color: #fff;
		padding: 40rpx 30rpx;
		margin-top: 20rpx;
		border-radius: 24rpx;

		.remark {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.re_text {
				font-size: 28rpx;
				color: #222222;
			}

			.re_info {
				font-size: 28rpx;
				color: #666;
			}
		}

		.payment {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 80rpx;

			.pay_text {
				font-size: 28rpx;
				color: #222222;
			}

			.pay_mode {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #222222;

				image {
					width: 42rpx;
					height: 42rpx;
				}
			}
		}
	}


}

.sub_footer {
	width: 100%;
	position: absolute;
	bottom: 40rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #fff;
	padding: 45rpx 30rpx;

	.pay_label {
		display: flex;
		align-items: center;

		.label {
			color: #222222;
			font-size: 30rpx;
		}

		.pay_total_price {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #222222;
		}
	}

	.pay_btn {
		width: 200rpx;
		height: 78rpx;
		text-align: center;
		line-height: 78rpx;
		background: #DC483C;
		border-radius: 39rpx;
		color: #fff;
		font-size: 30rpx;
	}
}
</style>
